<template>
  <div class="home">
    <nav-bar class="home-nav">
      <div slot="center">溯源管理</div>
      <span class="right" slot="right">
        <router-link to="/scan" tag="span" class="scan_box">
        <van-icon name="scan" size="30"/>
          </router-link>
      </span>
    </nav-bar>
    <div class="baseView">
      <div class="baseWrapper">
        <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label=""
          left-icon="location-o"
          right-icon="arrow-down"
          size="large"
          placeholder="切换基地"
          @click="showPicker = true"
        />
        <!--          <template #extra>-->
        <!--            <div>切换基地</div>-->
        <!--          </template>-->

      </div>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseLists"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>

    <weather></weather>

    <div class="container">
      <div class="column-title"><i class="left_line"></i>视频直播</div>
      <div class="video_show">
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto"
               poster="http://static.qiakr.com/app/full_res.jpg"
        >
          <source type="application/x-mpegURL">
        </video>
      </div>
    </div>

    <div class="monitor">
      <div class="container">
        <div class="column-title"><i class="left_line"></i>实时监测</div>
        <!--ehcarts图标区域-->
        <div class="data_observe">
          <div class="charts">
            <!--时间-->
            <div class="date">{{myDate}}</div>
            <!--时间-->
            <!--图表区域左右均分-->
            <div class="chart_list">
              <!--空气温度，湿度-->
              <div class="chart">
                <div class="chart_left">
                  <div id="temperature" style="flex: 1;">
                  </div>
                  <div class="text">空气温度</div>
                </div>
                <div class="chart_right">
                  <div id="wet" style="flex: 1;">
                  </div>
                  <div class="text">空气湿度</div>

                </div>
              </div>
              <!--空气温度，湿度-->
              <!--PM2.5，风速-->
              <div class="chart">
                <div class="chart_left">
                  <div id="pm" style="flex: 1;">
                  </div>
                  <div class="text">PM2.5</div>
                </div>
                <div class="chart_right">
                  <div id="cloud" style="flex: 1;">
                  </div>
                  <div class="text">风速</div>
                </div>
              </div>
              <!--PM2.5，风速-->
              <!--风向，土壤湿度-->
              <div class="chart">
                <div class="chart_left">
                  <div id="direction" style="flex: 1;">
                  </div>
                  <div class="text">风向</div>
                </div>
                <div class="chart_right">
                  <div id="soil" style="flex: 1;">
                  </div>
                  <div class="text">土壤湿度</div>
                </div>
              </div>
              <!--风向，土壤湿度-->
              <!--光照-->
              <div class="chart">
                <div class="chart_left">
                  <div id="light" style="flex: 1;">
                  </div>
                  <div class="text">光照</div>
                </div>
                <div class="chart_right">

                </div>
              </div>
              <!--光照-->
            </div>
            <!--图表区域左右均分-->

          </div>

        </div>
        <!--ehcarts图标区域-->
      </div>
    </div>

    <tab-bar :active="0"></tab-bar>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import tabBar from '@/components/content/tabBar';
  import NavBar from "@/components/common/navbar/NavBar";
  // import baseView from "./childComps/baseView";
  import weather from "./childComps/weather";

  import videojs from 'video.js'
  import 'videojs-contrib-hls'

  export default {
    name: "index",
    components: {
      tabBar,
      NavBar,
      weather,
    },
    data() {
      return {
        myDate: '',
        codeUrl: '',
        value: '',
        base_id: 0,
        baseLists: [],
        showPicker: false,
        myPlayer: null,
        playOptions: {
          controls: true,
          sources: [
            {
              type: 'application/x-mpegURL',
              src: '',
            }
          ],
          controlBar: {                     // 配置控制栏
            timeDivider: false, // 时间分割线
            durationDisplay: true, // 总时间
            progressControl: false, // 进度条
            customControlSpacer: false, // 未知
            fullscreenToggle: true // 全屏
          },
          //自动播放属性,muted:静音播放
          autoplay: "false",
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          // width: "375",
          // //设置视频播放器的显示高度（以像素为单位）
          // height: "auto"
        },
        option1: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width: 3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 40,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color: [[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}℃',
                fontSize: 12,
                offsetCenter: [5, "20%"],
                color: '#333'
              },
              data: [0]
            }
          ]
        },//空气温度传感器配置
        option2: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width: 3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 100,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color: [[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}%',
                fontSize: 12,
                offsetCenter: [5, "20%"],
                color: '#333'
              },
              data: [20]
            }
          ]
        },//空气湿度传感器图表配置项
        option3: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width: 3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 300,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color: [[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}',
                fontSize: 12,
                offsetCenter: [5, "20%"],
                color: '#333'
              },
              data: [20]
            }
          ]
        },//PM2.5传感器器图表配置项
        option4: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width: 3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 200,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color: [[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}km/h',
                fontSize: 12,
                offsetCenter: [5, "20%"],
                color: '#333'
              },
              data: [0]
            }
          ]
        },//风速传感器图表配置项
        option5: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              title: {
                offsetCenter: ["0", "20%"],
                fontSize: 11,
                color: "#333"
              },
              pointer: {
                width: 3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 8,
              splitNumber: 8,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color: [[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              axisLabel: {
                fontSize: 10,
                formatter: function (v) {
                  switch (v + '') {
                    case '1' :
                      return '北';
                    case '2' :
                      return '东北';
                    case '3' :
                      return '东';
                    case '4' :
                      return '东南';
                    case '5' :
                      return '南';
                    case '6' :
                      return '西南';
                    case '7' :
                      return '西';
                    case '8' :
                      return '西北';
                  }
                }
              },
              detail: {
                show: false,
                color: '#333'
              },

              data: [],
            }
          ]
        },//风向传感器图表配置项
        option6: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width: 3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 100,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color: [[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}%',
                fontSize: 12,
                offsetCenter: [5, "20%"],
                color: '#333'
              },
              data: [20]
            }
          ]
        },//土壤湿度传感器图表配置项
        option7: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width: 3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 100,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color: [[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}Lux',
                fontSize: 12,
                offsetCenter: [5, "20%"],
                color: '#333'
              },
              data: [20]
            }
          ]
        },//光照传感器图表配置项
      }
    },

    created() {
      var myDates = new Date();
      this.myDate = myDates.toLocaleString();        //获取日期与时间

      this.getBaseLists();
    },

    mounted() {
      // this.initVideo();
    },

    destroyed() {
      this.myPlayer.dispose()
    },

    methods: {
      getVideoSrc() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getBaseLive', {base_id: that.base_id}, r => {
          console.log('视频', r)
          that.playOptions.sources[0].src = r.data.video_addr;
          this.initVideo();
        })
      },

      initVideo() {
        //初始化视频方法
        this.myPlayer = videojs(myVideo, this.playOptions);
      },

      onConfirm(value) {
        this.value = value.text;
        this.base_id = value.base_id;
        //Util.storage.set('base_id', value.base_id)
        this.showPicker = false;
        console.log('base_id', this.base_id)
      },

      getBaseLists() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getBase', null, r => {
          console.log('基地结果：', r);
          that.value = r.data[0].name;
          that.base_id = r.data[0].id;

          // Util.storage.set('base_id', r.data[0].id);
          console.log('基地名称', that.value);
          console.log('基地ID', that.base_id);
          that.getVideoSrc();

          that.creatTemperature();
          that.creatWet();
          that.creatPm();
          that.creatCloud();
          that.creatDirection();
          that.creatSoil();
          that.creatLight();

          let baseArr = [];
          r.data.map(item => {
            let baseObj = {};
            baseObj['base_id'] = item.id;
            baseObj['text'] = item.name
            baseArr.push(baseObj);
            return baseArr;
          })
          this.baseLists = baseArr;
          console.log('基地数组', baseArr)
        })
      },

      creatTemperature() {
        console.log('调用时base_id', this.base_id)
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=2", null, r => {
          this.option1.series[0].data[0] = parseInt(r.data.sources);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('temperature'));
          myChart.setOption(this.option1);
        });

      },
      creatWet() {
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=3", null, r => {
          this.option2.series[0].data[0] = parseInt(r.data.sources);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('wet'));
          myChart.setOption(this.option2);
        });

      },
      creatPm() {
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=7", null, r => {
          this.option3.series[0].data[0] = r.data.sources;
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('pm'))
          myChart.setOption(this.option3);
        });
      },
      creatCloud() {
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=5", null, r => {
          this.option4.series[0].data[0] = r.data.sources;
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('cloud'))
          myChart.setOption(this.option4);
        });
      },
      creatDirection() {
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=4", null, r => {
          // console.log("风向:",r.data.sources);
          // console.log("风向:",typeof r.data.sources);
          switch (r.data.sources) {
            case '1':
              this.option5.series[0].data.push({value: 1, name: '北'});
              break;
            case '2':
              this.option5.series[0].data.push({value: 2, name: '东北'});
              break;
            case '3':
              this.option5.series[0].data.push({value: 3, name: '东'});
              break;
            case '4':
              this.option5.series[0].data.push({value: 4, name: '东南'});
              break;
            case '5':
              this.option5.series[0].data[0] = {value: 5, name: '南'};
              break;
            case '6':
              this.option5.series[0].data.push({value: 6, name: '西南'});
              break;
            case '7':
              this.option5.series[0].data.push({value: 7, name: '西'});
              break;
            default:
              this.option5.series[0].data.push({value: 8, name: '西北'});
          }
          // console.log("this.option5",this.option5);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('direction'));
          myChart.setOption(this.option5);
        });
      },
      creatSoil() {
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=6", null, r => {
          // console.log('土壤湿度',parseFloat(r.data.sources)*100);
          this.option6.series[0].data[0] = parseInt(parseFloat(r.data.sources) * 100);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('soil'));
          myChart.setOption(this.option6);
        });
      },
      creatLight() {
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=8", null, r => {
          this.option7.series[0].data[0] = r.data.sources;
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('light'));
          myChart.setOption(this.option7);
        });

      },


    }
  }
</script>

<style scoped>
  .home {
    padding-top: .9rem;
    padding-bottom: .9rem;
  }

  .scan_box {
    display: flex;
  }

  .data_observe {
    height: 696px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 10px;
  }

  .charts {
    height: 686px;
    width: 100%;
    background: white;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .date {
    margin-bottom: 15px;
    font-size: .3rem;
    color: #000000;
  }

  .chart_list {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .chart {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .chart_left{
    flex: 1;
    display: flex;
    flex-direction: column;
    /*width:40%*/
  }

  .text {
    height: .4rem;
    font-size: .28rem;
    font-family: "Adobe 黑体 Std R";
    color: black;
    text-align: center;
  }

  .chart_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*width:40%*/
  }

  .baseWrapper >>> .van-cell {
    padding: 10px 15px;
    background-color: #fbfbfb;
    font-size: .3rem;
  }

  /*.baseWrapper >>> .van-field__control{*/
  /*  font-size: .32rem;*/
  /*}*/


</style>
